<template>
    <div class="login">
        <div class="login-window">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>登录</span>
                </div>
                <el-form>
                <el-input v-model="input" prefix-icon="el-icon-user" placeholder="请输入账号"></el-input>
                <!-- prefix-icon="el-icon-user" 在input中加入prefix-icon属性，后边跟上icon的名即可将icon加在input框中 -->
                <el-input v-model="input1" prefix-icon="el-icon-lock" placeholder="请输入密码"></el-input>
                <el-input v-model="input2" prefix-icon="el-icon-message" placeholder="请输入邮箱"></el-input>
                <el-button type="primary">登录</el-button>
            </el-form>
            <div class="box">还没有账号？<el-link type="primary">点击注册</el-link></div>
            </el-card>


        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            input: '',
            input1: '',
            input2: ''
        }
    }
}
</script>

<style scoped>
/* .register-window {
    width: 350px;
    height: 400px;
    border-radius: 5px;
    background-color: white;
    margin: auto;
    margin-top: 100px;
    padding: 40px 20px;
}
.el-input{
    margin-top: 20px;;
}
.el-button{
    width: 100%;;
    margin-top: 20px;;
} */
.login{
    overflow: hidden;
}
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.box-card {
    width: 480px;
}
.is-always-shadow{
    width: 360px;
    height: 430px;;;
    margin: auto; 
    margin-top: 100px;
}
.is-always-shadow .el-card__header {
    border-bottom: 2px solid skyblue ;
}
.el-input{
    margin-top: 30px;;
}
.el-button--primary{
    margin-top: 30px;;
    width: 100%;;
}
.box{
    width: 100%;
    height: 15px;
    margin-top: 30px;;
    font-size: 14px;;
    text-align: center;
}
</style>